<template>
	<view class="detail-page"  :style="isGif==1?'background:none;':''">
		<detail-head type="none" url="../bazaar/bazaar"></detail-head>
		<view class="detail-img">
			<image class="prod-img" :src="detail.pictureUrl" mode="widthFix" v-if="isGif==1"></image>
			<Card  :src="detail.pictureUrl" v-if="isGif==-1"></Card>
			<image class="prod-img" src="../../static/img/detail-add.jpg" mode="widthFix" v-if="isGif==1"></image>
		</view>
		<view class="detail-title" v-if="isGif!=1">
	<!-- 		<view class="title"><text>" </text> {{detail.worksName}}<text> "</text></view>
			<view class="auth">{{detail.attest}}</view> -->
		</view>
		<view class="goods-detail">
			<view class="title">
				<view class="left-icon">
					<image src="../../static/img/detail_ms_left.png" mode=""></image>
				</view>
				<view class="is-name">
					<view class="name">
						〝&nbsp;{{detail.worksName}}&nbsp;〞
					</view>
					<view class="tip">
						<view class="sm-name">
							{{detail.worksName}}
						</view>
						<view class="num">
							限量{{detail.total}}份
						</view>
					</view>
				</view>
				<view class="right-icon">
					<image src="../../static/img/detail_ms_right.png" mode=""></image>
				</view>
			</view>
			
			<!-- 价格编号 -->
			<view class="prise">
				<view class="left">
					<view class="font">
						价格
					</view>
					<view class="num">
						￥{{detail.price}}
					</view>
				</view>
				<view class="right">
					<view class="font">
						编号
					</view>
					<view class="num">
						#{{ detail.worksNum }}
					</view>
				</view>
				<view class="btn"  @click="onToggleMenu(true, 'moreRef')">
					<view>全部编号</view>
				</view>
			</view>
			<view class="address">
				<view class="hy">
					<text>合约地址</text>
					<image class="contract" src="../../static/img/heyue.png" mode="aspectFit"></image>
				</view>
				<view class="num">
					{{ setStringStyle(detail.contractAddress) }}
				</view>
			</view>
			<view class="lian">
				<view class="left">
					链上标识
				</view>
				<view class="right">
					{{detail.contractCode}}
				</view>
			</view>
		</view>
		<!--藏品描述  -->
			<view class="detail-desc">
				<view class="title">
					〝 &nbsp;藏品描述&nbsp; 〞
				</view>
				<view class="inner">
					{{ detail.describe }}
				</view>
			</view>
			<!-- 购买须知 -->
			<view class="notice">
				<view class="title">
					购买须知
				</view>
				<view class="inner">
					数字藏品为虚拟数字商品，而非实物，仅限实名认证为年满18周岁的中国大陆用户购买。数字藏品的版权由发行方和原创者所有，除另行获得版权拥有者书面同意外，用户不得将数字藏品用于任何商业用途。本商品一经售出，不支持退换。本商品源文件不支持本地下载。请勿对数字藏品进行炒卖、场外交易或以任何其他非法方式进行使用。
				</view>
			</view>
			<!-- fixed_box -->
			<view class="fixed-box" style="height: 150rpx;">
				
			</view>
		<view class="detail-bay" v-if="detail.id">
			<button type="default" v-if="detail.worksSubStatus === 'SOLD'">{{detail.worksSubStatusName}} </button>
			<button type="default" v-if="detail.worksSubStatus === 'INSTOCK'" @click="$tool.onConfirmclick(onPayClick)">立即购买 ￥{{detail.price}} </button>
		</view>
		<uni-popup ref="moreRef" type="bottom">
			<view class="popup">
				<view class="title">其他作品</view>
				<view class="only">
					<checkbox-group @change="onLineChange">
						<label>
							<checkbox color="#FFBD47" value="on" :checked="online" />只看在售
						</label>
					</checkbox-group>
					<view class="code">编号: #{{params.condition.startNum}} - #{{params.condition.endNum}}</view>
				</view>
				<view class="lineBox">
					<cj-slider class="range" activeColor="#FFBD47" v-model="codeValue" :min="0" :max="detail.total"
						:step="1" :blockWidth="30" @end="blockEnd" @clickChange="clickChange" />
				</view>
				<!-- <view class="otherList"> -->
				<scroll-view class="otherList" scroll-y="true">
					<view class="item" v-for="item in listData" :key="item.id"
						@click="onToggleMenu(false, 'moreRef'); $tool.navigateTo(`/pages/home/detail?id=${item.id}`)">
						<view class="left">
							<view class="name">{{item.worksName}} <text>#{{item.worksNum}}</text></view>
							<view class="price">￥{{item.price}}</view>
						</view>
						<view :class="['right', item.worksSubStatus === 'INSTOCK' ? 'inline':'']">
							<text>{{item.worksSubStatusName}}</text>
						</view>
					</view>
					<uni-load-more :contentText="contentText" @clickLoadMore="onClickLoadMore" :status="queryStatus">
					</uni-load-more>
				</scroll-view>
				<!-- </view> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Card from '@/component/detail-card/index.vue'
	import {
		isWeiXin,
		getUserinfo,
		setStringStyle,
		encryptStr,
		objKeySort
	} from '../../utils/utils.js'
	import {
		getWorksDetails,
		getOtherWorksPage
	} from '../../request/prod-api.js'
	import {
		createBalancePay
	} from '../../request/common-api.js'
	export default {
		components:{
			Card
		},
		data() {
			return {
				isGif:0,
				detail: {},
				listData: [],
				// 列表查询参数
				params: {
					condition: {
						sortRule: "PRICE",
						worksCode: "",
						startNum: 1,
						endNum: 12,
						worksSubStatus: ""
					},
					pageNum: 0,
					pageSize: 12
				},
				// 没有更多了
				isNoMore: false,
				// 加载状态
				queryStatus: 'more',
				// 各状态文字说明
				contentText: {
					contentdown: "点击加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				// 是否只看在线
				online: false,
				// 范围
				codeValue: [0, 12],
				timer: null,
				setStringStyle,
			}
		},
		onLoad(option) {
			this.onloadDetail(option.id)
		},
		watch: {
			codeValue: {
				handler(n) {
					this.params.condition.endNum = n[1]
					this.params.condition.startNum = n[0]
					this.params.pageSize = this.params.condition.endNum - this.params.condition.startNum
				}
			}
		},
		methods: {
			blockEnd() {
				this.onLoadListData()
			},

			clickChange() {
				this.params.condition.endNum = this.codeValue[1]
				this.params.condition.startNum = this.codeValue[0]
				this.params.pageSize = this.params.condition.endNum - this.params.condition.startNum
				this.onLoadListData()
			},

			onLineChange(e) {
				if (e.detail.value[0] === 'on') {
					this.online = true
				} else {
					this.online = false
				}
				this.onLoadListData()
			},

			// popup 切换
			onToggleMenu(show, refName) {
				if (show && this.listData.length === 0) this.onLoadListData()
				this.$tool.popupToggle(show, this, refName, 'bottom')
			},

			// 点击加载更多
			onClickLoadMore() {
				if (!this.isNoMore) {
					this.onLoadListData()
				}
			},

			// 点击购买创建订单 
			async onPayClick() {
				try {
					let key = ''
					let user = getUserinfo()
					let time = new Date().getTime()
					let nonceStr = parseInt(Math.random() * (1000000000, 10000000000))
					let params = {
						actualPaymentAmount: this.detail.price,
						goodsTitle: this.detail.worksName,
						orderPlatform: isWeiXin() ? 'WECHAT' : 'ALIPAY',
						productId: this.detail.id,
						productType: 'WORKS',
						nonceStr: nonceStr,
						timestamp: time,
						remark: this.detail.worksName,
						tradeType: isWeiXin() ? 'JSAPI' : 'MWEB'
					}
					params = objKeySort(params)
					for (let i in params) {
						key += i + '=' + params[i] + '&'
					}
					params.sign = encryptStr(key + 'sign_key')
					let {
						code,
						message,
						data
					} = await createBalancePay(params)
					if (code === 200) {
						this.$tool.navigateTo(`/pages/home/pay?id=${data}`)
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
			},

			// 加载产品详情
			async onloadDetail(id) {
				try {
					let {
						code,
						message,
						data
					} = await getWorksDetails(id)
					if (code === 200) {
						this.detail = data
						if(this.detail.pictureUrl.search('.gif')!=-1){
							this.isGif = 1
						}else{
							this.isGif = -1
						}
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
			},

			// 加载更多
			async onLoadListData() {
				this.listData = []
				this.queryStatus = 'loading'
				// this.params.pageNum += 1
				this.params.condition.worksCode = this.detail.worksCode
				this.params.condition.worksSubStatus = this.online ? 'INSTOCK' : 'SOLD'
				try {
					let {
						code,
						message,
						data
					} = await getOtherWorksPage(this.params)
					if (code === 200) {
						if (this.params.pageNum <= data.totalPage) {
							this.isNoMore = true
							this.listData.push(...data.list)
							this.queryStatus = 'noMore'
						} else {
							this.isNoMore = true
							this.queryStatus = 'noMore'
						}
					} else {
						this.queryStatus = 'more'
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.queryStatus = 'more'
					this.$tool.showErr(err)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '../../static/css/detail2.scss';
</style>
